<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>zTree01</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link href="" rel="stylesheet">

<link rel="stylesheet" type="text/css" href="../css/common.css">
<link rel="stylesheet" type="text/css" href="../tool/zTree_v3/css/demo.css">
<link rel="stylesheet" type="text/css" href="../tool/zTree_v3/css/zTreeStyle/zTreeStyle.css">

<!-- <script type="text/javascript" src="../tool/jquery/jquery-3.3.1.js"></script> -->
<script type="text/javascript" src="../tool/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../tool/zTree_v3/js/jquery.ztree.all.js"></script>

<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/demo05_zTree01.js"></script>

<SCRIPT LANGUAGE="JavaScript">
   var zTreeObj;
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {
   		data: {
   			key: {
	   			name: "name",
	   			children: "children"
	   		}
   		},
   		check: {
	   			enable: true,
	   			chkStyle: "checkbox",
				autoCheckTrigger: true
	   	},
	   	callback: {
			onCheck: function(event, treeId, treeNode){
				// console.log(event);
				// console.log(treeId);
				console.log("选中start");
				console.log(treeNode);
				console.log("选中end");
			},
			onClick: function(event, treeId, treeNode, clickFlag){
				console.log("点击start");
				console.log(treeNode);
				console.log(treeNode.checked);
				console.log("点击end");


			}
		}
   };
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes =[
			{ name:"父节点1 - 展开", open:true,
				children: [
					{ name:"父节点11 - 折叠",
						children: [
							{ name:"叶子节点111"},
							{ name:"叶子节点112"},
							{ name:"叶子节点113"},
							{ name:"叶子节点114"}
						]},
					{ name:"父节点12 - 折叠",
						children: [
							{ name:"叶子节点121"},
							{ name:"叶子节点122"},
							{ name:"叶子节点123"},
							{ name:"叶子节点124"}
						]},
					{ name:"父节点13 - 没有子节点", isParent:true}
				]},
			{ name:"父节点2 - 折叠",
				children: [
					{ name:"父节点21 - 展开", open:true,
						children: [
							{ name:"叶子节点211"},
							{ name:"叶子节点212"},
							{ name:"叶子节点213"},
							{ name:"叶子节点214"}
						]},
					{ name:"父节点22 - 折叠",
						children: [
							{ name:"叶子节点221"},
							{ name:"叶子节点222"},
							{ name:"叶子节点223"},
							{ name:"叶子节点224"}
						]},
					{ name:"父节点23 - 折叠",
						children: [
							{ name:"叶子节点231"},
							{ name:"叶子节点232"},
							{ name:"叶子节点233"},
							{ name:"叶子节点234"}
						]}
				]},
			{ name:"父节点3 - 没有子节点", isParent:true}
		];

	var nodes = [
		{name: "父节点1", info: "info01", children: [
			{name: "子节点1", info: "info01"},
			{name: "子节点2", info: "info01"}
		]},
		{ name:"zTree Home", url:"http://www.treejs.cn/", target:"_blank", children: [
			{name: "子节点1", info: "info01"},
			{name: "子节点2", info: "info01"}	
		]}
	];
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, nodes);
   });
  </SCRIPT>

</head>
<body>
	<div>
	   <ul id="treeDemo" class="ztree"></ul>
	</div>
	<hr class="hr">
	<span id="Timer"></span>
</body>
</html>